<template>
	<view :style="colorStyle">
		<view class='productSort copy-data' :style="{height:pageHeight,marginTop: searchTopHeight+'px'}">
			<view class="search-top" ref="searchTop">
				<view class='header acea-row row-center-wrapper'>
					<view class='acea-row row-between-wrapper input'>
						<text class='iconfont icon-sousuo' @click="searchKeyword"></text>
						<input type='text' placeholder="搜索商品" placeholder-class='placeholder' confirm-type='search' name="search"
							@confirm="searchKeyword" v-model="keyword"></input>
					</view>
				</view>
				<view class="search-bar">
					<block v-for="(item,index) in searchTypeList" :key="item.id">
						<view @click="togglePopup(item)" v-if="item.isShowInPage">{{item.title}}
							<view class="iconfont icon-xialazhankai" :class="isPopupOpens[index]?'rotate':'normal'"></view>
						</view>
					</block>
				</view>
				<view class="search-item">
					<view class="search-item-sub" v-for="(item,index) in where" :key="index">
						{{item.title}}
						<text class="iconfont icon-iconfontguanbi" style="margin-left: 10rpx;" @click="delWhere({index,item})"></text>
					</view>
					<view class="search-item-sub" v-if="Object.keys(where).length > 0" @click="clearWhere">
						<view class="iconfont icon-shanchu3"></view>
					</view>
				</view>
			</view>
			<view class="product-list">
				<v-product v-for="(item,index) in list" :key="item.id" :item="item"></v-product>
				
				<v-loadmore v-if="list.length > 0" :status="loadStatus" @click="getPageDataByWhere"></v-loadmore>
				<v-nodata v-else-if="page > 1"></v-nodata>
				<!-- #ifdef MP -->
				<view style="width:100%;height: 170rpx;"></view>
				<!-- #endif -->
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="popupChange">
				<view class="popup-container" :class="{ 'popup-height': popupType === 'right' }">
					<view class="popup-title">{{currSearchType.title}}</view>
					<view class="popup-content">
						<v-value-range v-if="currSearchType.id == 0" :valueRange="sortRange" :where="where" @onSelect="searchSelect"></v-value-range>
						<v-value-range v-if="currSearchType.id == 1" type="m_type" :valueRange="mTypeRange" :where="where" @onSelect="searchSelect"></v-value-range>
						<v-addr-range v-if="currSearchType.id == 2" @onSelect="searchSelect" :where="where"></v-addr-range>
						<v-value-range v-if="currSearchType.id == 3" type="price" :valueRange="priceRange" :where="where" @onSelect="searchSelect"></v-value-range>
						<v-value-range v-if="currSearchType.id == 5" type="cate_id" :valueRange="cateRange" :where="where" @onSelect="searchSelect"></v-value-range>
						<v-search v-if="currSearchType.id == 9" :where="where"
						 :searchTypeList="searchTypeList"
						 :cateRange="cateRange"
						 :mTypeRange="mTypeRange"
						 :priceRange="priceRange"
						 @onWhere="onWhere"
						 @onSelect="searchSelect"></v-search>
					</view>
					<view class="popup-btns">
						<button class='btn bg-color' @click="search" formType="submit">点击查看结果（共 {{total}} 条）</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<tabBar v-if="!is_diy" :pagePath="'/pages/goods_cate/goods_cate'"></tabBar>
	</view>
</template>

<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
const app = getApp();
import colors from '@/mixins/color';
import { mapGetters } from 'vuex';
import tabBar from '@/pages/index/visualization/components/tabBar.vue';
import { colorChange } from '../../api/api';
// import uni-popup from '@/uni_modules/uni-popup.vue';

export default {
	computed: mapGetters(['isLogin', 'uid']),
	components: {
		tabBar
	},
	mixins: [colors],
	data() {
		return {
			is_diy: uni.getStorageSync('is_diy'),
			isNew: false,
			pageHeight: '100%',
			sysHeight: sysHeight,
			// #ifdef APP-PLUS
			pageHeight: app.globalData.windowHeight,
			// #endif
			
			searchTopHeight: 90,
			
			keyword: '',
			currSortIndex: 0,
			sortRange: [],
			mTypeRange: [],
			priceRange: [],
			cateRange: [],
			
			popupType: "bottom",
			currSearchTypeIndex: 0,
			currSearchType: {},
			searchTypeList: [],
			isPopupOpens: [],
			where: {},
			
			list: [],
			loadStatus: "more",
			page: 1,
			total: 0, // 查询到的总记录数
			
			cateId: 0
		};
	},
	onLoad(opts){
		this.cateId = parseInt(opts.cateId||0)
		uni.hideTabBar();
	},
	onShow() {
		this.getInitDataGoodsCate(()=>{
			this.getPageDataByWhere();
		});
	},
	watch:{
		where:{
			handler(){
				this.getSearchTopHeight();
			},
			deep: true
		}
	},
	methods: {
		// 计算顶部高度
		getSearchTopHeight(){
			let that = this
			this.$nextTick(()=>{
				uni.createSelectorQuery().select('.search-top').boundingClientRect(data => {
					that.searchTopHeight = data.height;
				}).exec()
			})
		},
		getInitDataGoodsCate(cb) {
			this.$http.get("v1/getInitDataGoodsCate").then(res=>{
				this.cateRange = res.data.cateRange
				this.sortRange = res.data.sortRange
				this.mTypeRange = res.data.mTypeRange
				this.priceRange = res.data.priceRange
				this.searchTypeList = res.data.searchTypeList
				
				// 设置初始货条件
				this.setDefaultWhere()
				cb && cb()
				
			})
		},
		// 设置初始货条件
		setDefaultWhere(){
			if(this.cateId){
				let item,len = this.cateRange.length;
				for (var i = 0; i < len; i++) {
					let item_ = this.cateRange[i]
					if(item_.id == this.cateId){
						item = item_
						break;
					}
				}
				this.$set(this.where, "cate_id", item)
			}
		},
		togglePopup(item){
			this.currSearchType = item
			
			switch(this.currSearchType.id){
				case 0: // 排序
				case 1: // 工序
				case 2: // 发货地
				case 3: // 价格
				case 5: // 分类
					this.popupType = 'bottom'
					break;
				case 9:
					this.popupType = 'right'
			}
			this.$refs.popup.open(this.popupType)
		},
		onWhere({type,item}){
			this.$set(this.where, type, item)
			this.getSearchTotal()
		},
		searchSelect({index}){
			this.setWhere(index)
			this.getSearchTotal()
		},
		setWhere(index=0){
			let item;
			switch(this.currSearchType.id){
				case -1: // 关键字搜索
					if(this.keyword){
						item = {id:index,title:this.keyword}
						this.$set(this.where, "keyword", item)
					}
				break;
				case 0: // 排序
					item = this.sortRange[index]
					this.$set(this.where, "sort", item)
					
				break;
				case 1: // 工序
					item = this.mTypeRange[index]
					this.$set(this.where, "m_type", item)
				break;
				case 2: // 发货地
					item = {id:0,title:index}
					this.$set(this.where, "from_addr", item)
				break;
				case 3: // 价格
					item = this.priceRange[index]
					this.$set(this.where, "price", item)
				break;
				case 5: // 分类
					item = this.cateRange[index]
					this.$set(this.where, "cate_id", item)
				break;
				case 9: // 条件筛选
				break;	
			}
		},
		getSearchTotal(){
			// 如果是排序，则直接搜索
			if(this.currSearchType.id == 0){
				this.search()
			}else{
				this.$http.post("v1/getSearchTotalByWhere", this.where).then(res=>{
					this.$set(this, "total", res.data.total)
				})
			}

		},
		searchKeyword(){
			// if(this.keyword){
				this.currSearchType = {id: -1, title: "关键字" }
				this.setWhere()
				this.search()
			// }

		},
		search(){
			this.$refs.popup.close()
			this.reset()
			this.getPageDataByWhere()
		},
		getPageDataByWhere(){
			let that = this
			if (that.loadStatus != "more") return;
			that.loadStatus = "loading";
			that.$http.post("v1/getPageDataByWhere?page=" + that.page, that.where).then(res=>{
				let data = res.data.pageData;
				if(that.page == 1) that.total = data.total;
				that.list.push(...data.data);
				
				if(that.list.length >= that.total) that.loadStatus = "nomore";
				else that.loadStatus = "more";
				
				that.page++;
			}).catch(err => {
				that.loadStatus = "more";
			});
		},
		reset(){
			this.page = 1
			this.loadStatus = "more"
			this.list = []
			this.total = 0
		},
		popupChange({type,show}) {
			this.$set(this.isPopupOpens, this.currSearchType.id, show)
		},
		sortRangeChange(e){
			console.log(e);
		},
		clearWhere(){
			this.where = {};
			this.keyword = "";
			this.search();
		},
		delWhere(item){
			delete this.where[item.index]
			this.where = Object.assign({}, this.where) // 解决深度监听中失效的问题
			if(item.index == "keyword") this.keyword = ""
			this.$forceUpdate()
			this.search();
		}
	},
	onReachBottom() {
		this.getPageDataByWhere()
	}
};
</script>
<style scoped lang="scss">
	page{
		background-color: #fff!important;
		margin-bottom: 100rpx;
	}
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}
	
	@mixin height {
		/* #ifndef APP-NVUE */
		// height: calc(100vh - 200rpx);
		height: 80vh;
		overflow-y: auto;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}
	// /deep/.mask {
	// 	z-index: 99;
	// }
	.search-bar,.search-item,.product-list{
		width: 700rpx;
	}
	.search-bar{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		.iconfont{
			font-size: 30rpx;
			display: inline-block;
		}
		.rotate{
			 transform: rotate(180deg);
			 animation: rotate 1s;
		}
		.normal{
			animation: normal 1s;
		}
	}
	@keyframes rotate {
		0%{
			opacity: 0.3;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes normal {
		0%{
			opacity: 0.3;
		}
		100% {
			opacity: 1;
		}
	}
	.search-item{
		@include flex;
		flex-wrap: wrap;
		.search-item-sub{
			flex-shrink: 1;
			padding: 10rpx 20rpx;
			margin-right: 10rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.product-list{
		
	}
	.productSort {
		display: flex;
		flex-direction: column;
		align-items: center;
		//#ifdef MP
		height: calc(100vh - 380rpx) !important;
		margin-bottom: 200rpx;
		//#endif
		//#ifndef MP
		height: 100vh;
		//#endif
		// margin-top: 180rpx;
		.search-top{
			position: fixed;
			top: 0;
			background-color: #fff;
			opacity: 1;
			z-index: 1;
		}
		.header {
			width: 100%;
			height: 96rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
			.input {
				width: 700rpx;
				height: 60rpx;
				background-color: #eee;
				border-radius: 50rpx;
				box-sizing: border-box;
				padding: 0 25rpx;
				.iconfont {
					font-size: 35rpx;
					color: #555;
				}
				.placeholder {
					color: #999;
				}
				input {
					font-size: 26rpx;
					height: 100%;
					width: 597rpx;
				}
			}
		}
	}
	.popup-container {
		@include flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx;
		margin-bottom: 80rpx;
		// height: 600rpx;
		background-color: #fff;
		.popup-title{
			width: 100%;
			text-align: center;
			margin-bottom: 30rpx;
			font-weight: bold
		}
		.popup-content,.popup-btns{
			@include flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}
		.popup-btns{
			
		}
	}
	.popup-height {
		height: calc(100vh - 100rpx);
		overflow-y: auto;
		width: 600rpx;
	}
	.btn{
		font-size: 32rpx;
		color: #fff;
		width: 90%;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 50rpx auto;
	}
</style>
